<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区域 -->
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
                </el-col>
            </el-row>

            <!-- 表格区域 -->
            <tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index border :show-row-hover="false" class="treeTable">
                <!-- 是否有效 列 -->
                <template slot="isOk" slot-scope="scope">
                    <i class="el-icon-success" style="color:lightgreen;" v-if="scope.row.cat_deleted === false"></i>
                    <i class="el-icon-error" style="color:red;" v-else></i>

                </template>
                <!-- 排序 列 -->
                <template slot="order" slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                    <el-tag type="warning" size="mini" v-else>三级</el-tag>

                </template>

                <!-- 操作 列 -->
                <template slot="option" slot-scope="scope">
                    <!-- <p>{{scope.row}}</p> -->
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditCateDialog(scope.row.cat_id)">编辑</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeCateById(scope.row.cat_id)">删除</el-button>

                </template>
            </tree-table>

            <!-- 分页区域 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[3, 5, 10, 15]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>

        <!-- 添加分类的对话框 -->
        <el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClosed">
            <!-- 添加分类的表单 -->
            <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addCateForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label=" 父级分类">
                    <!-- cascader级联选择器 -->
                    <!-- options 用来指定数据源 -->
                    <!-- props用来指定配置对象 -->
                    <el-cascader v-model="selectedKeys" :options="parentCateList" :props="{ expandTrigger: 'hover',...cascaderProps, checkStrictly: true}" @change="parentCateChanged" clearable></el-cascader>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改分类的对话框 -->
        <el-dialog title="修改分类" :visible.sync="editCateDialogVisible" width="50%">
            <!-- 修改分类名称的表单 -->
            <el-form :model="editCateForm" :rules="editCateFormRules" ref="editCateFormRef" label-width="100px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="editCateForm.cat_name"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editCate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 商品分类的数据列表
            cateList: [],
            // 查询条件
            queryInfo: {
                type: 3,
                pagenum: 1,
                pagesize: 5
            },
            // 总数据条数
            total: 0,
            // 为table指定列的定义
            columns: [
                {
                    label: "分类名称",
                    prop: "cat_name"
                },
                {
                    label: "是否有效",
                    // 将当前列定义为模板列
                    type: "template",
                    // 表示当前列使用的模板名称
                    template: "isOk"
                },
                {
                    label: "排序",
                    // 将当前列定义为模板列
                    type: "template",
                    // 表示当前列使用的模板名称
                    template: "order"
                },
                {
                    label: "操作",
                    // 将当前列定义为模板列
                    type: "template",
                    // 表示当前列使用的模板名称
                    template: "option"
                }
            ],
            // 控制添加分类的对话框的显示与隐藏
            addCateDialogVisible: false,
            // 添加分类的表单数据对象
            addCateForm: {
                // 分类父 ID
                cat_pid: 0,
                // 将要分类的名称
                cat_name: "",
                // 分类的等级，默认添加为一级分类
                cat_level: 0
            },
            // 添加分类表单的验证规则对象
            addCateFormRules: {
                cat_name: [{ required: true, message: "请输入要添加的分类名称", trigger: "blur" }]
            },
            // 父级分类列表的数据
            parentCateList: [],
            // 选中的父级分类的id数组
            selectedKeys: [],
            cascaderProps: {
                value: "cat_id",
                label: "cat_name",
                children: "children"
            },
            // 控制修改分类对话框的显示与隐藏
            editCateDialogVisible: false,
            // 修改分类的表单数据对象
            editCateForm: {
                // 分类名称
                cat_name: ""
            },
            // 修改分类名称的验证规则对象
            editCateFormRules: {
                cat_name: [{ required: true, message: "请输入要添加的分类名称", trigger: "blur" }]
            },
            cat_id: ""
        }
    },
    created() {
        this.getCateList()
    },
    methods: {
        // 获取商品分类的数据
        async getCateList() {
            const { data: res } = await this.$http.get("categories", { params: this.queryInfo })
            console.log(res.data)
            if (res.meta.status !== 200) {
                return this.$message.error("获取商品分类列表失败")
            }
            // 获取商品分类列表成功
            // 把数据列表赋值给cateList
            this.cateList = res.data.result
            // 为总数据条数赋值
            this.total = res.data.total
        },
        // 监听pagesize改变的处理事件
        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize
            // 重新发起请求获取数据
            this.getCateList()
        },
        // 监听pagenum 改变的处理事件
        handleCurrentChange(newNum) {
            this.queryInfo.pagenum = newNum
            this.getCateList()
        },
        // 点击按钮，展示添加分类的对话框
        showAddCateDialog() {
            // 先获取父级分类的数据列表
            this.getParentCateList()
            // 再展示出分类对话框
            this.addCateDialogVisible = true
        },
        // 获取父级分类列表数据方法
        async getParentCateList() {
            const { data: res } = await this.$http.get("categories", { params: { type: 2 } })
            // console.log(res)
            if (res.meta.status !== 200) {
                return this.$message.error("获取父级分类列表数据失败")
            }
            // 获取父级分类列表成功
            // 将父级分类列表数据存储至data中
            this.parentCateList = res.data
        },
        // 选择项发生变化触发此函数
        parentCateChanged() {
            console.log(this.selectedKeys)
            // 如果selectedKeys 的数据中的length大于0，说明选中了父级分类
            // 反之，这说明没有选中父级分类，默认为一级分类
            if (this.selectedKeys.length > 0) {
                // 父级分类的id
                this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
                // 为当前分类的等级赋值
                this.addCateForm.cat_level = this.selectedKeys.length
                return
            }
            // 父级分类的id
            this.addCateForm.cat_pid = 0
            // 为当前分类的等级赋值
            this.addCateForm.cat_level = 0
        },
        // 点击按钮，添加新的分类事件
        addCate() {
            // console.log(this.addCateForm)
            this.$refs.addCateFormRef.validate(async valid => {
                // console.log(valid)
                if (!valid) return
                const { data: res } = await this.$http.post("categories", this.addCateForm)
                if (res.meta.status !== 201) {
                    return this.$message.error("添加分类失败")
                }
                this.$message.success("添加分类成功")
                // 重新请求分类列表数据
                this.getCateList()
                // 隐藏添加分类的对话框
                this.addCateDialogVisible = false
            })
        },
        // 监听关闭添加分类的对话框事件
        addCateDialogClosed() {
            // 重置添加分类表单
            this.$refs.addCateFormRef.resetFields()
            this.selectedKeys = []
            this.addCateForm.cat_level = 0
            this.addCateForm.cat_pid = 0
        },
        // 点击按钮，显示修改分类的对话框事件
        async showEditCateDialog(cat_id) {
            this.editCateDialogVisible = true
            this.cat_id = cat_id
            console.log(cat_id)
            // 通过id查找当前分类的信息并将其展示在对话框中，提供给用户让其进行修改操作
            const { data: res } = await this.$http.get("categories/" + cat_id)
            // console.log(res)
            if (res.meta.status !== 200) {
                return this.$message.error("获取分类失败")
            }
            this.editCateForm.cat_name = res.data.cat_name
        },
        // 点击按钮，监听修改分类的事件
        editCate() {
            this.$refs.editCateFormRef.validate(async valid => {
                // console.log(valid)
                if (!valid) return
                // valid 为true 发起修改分类的网络请求
                const { data: res } = await this.$http.put("categories/" + this.cat_id, { cat_name: this.editCateForm.cat_name })
                if (res.meta.status !== 200) {
                    return this.$message.error("更新分类列名称失败")
                }

                this.$message.success("更新分类名称成功")
                // 关闭对话框
                this.editCateDialogVisible = false
                // 重新获取分类列表数据
                this.getCateList()
            })
        },
        // 根据id删除分类方法
        async removeCateById(cat_id) {
            console.log(cat_id)
            // 弹框询问用户是否确实要删除此用户信息
            // this.$confirm 返回值是一个Promise实例对象，因此可以用await/async来简化
            // 一定要进行catch捕获错误，否则会报错
            const confirmResult = await this.$confirm("此操作将永久删除该商品分类, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).catch(error => error)
            console.log(confirmResult)
            if (confirmResult !== "confirm") {
                return this.$message.info("您已取消删除操作")
            }
            // 删除商品分类数据
            // 发起网络请求删除商品分类
            const { data: res } = await this.$http.delete("categories/" + cat_id)
            // console.log(res)
            if (res.meta.status !== 200) {
                return this.$message.error("删除分类失败")
            }
            this.$message.success("删除分类成功")
            // 重新获取商品分类数据
            this.getCateList()
        }
    }
}
</script >

<style lang='less' scoped>
.treeTable {
    margin-top: 15px;
}
.el-cascader {
    width: 100%;
}
</style>